<!--
 * @Author: ChunLai
 * @Date: 2023-08-02 14:11:28
 * @LastEditTime: 2025-09-04 17:16:43
 * @Description: 签字列表模块
 * @FilePath: \02.bldinsure\src\views\sign\components\QianZiListModule.vue
-->
<template>
  <div class="mode3">
    <div class="sign_ul">
      <div class="sign_item" v-if="tbrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            投保人 <i>{{ applicant.name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="tbrSignImg ? 'isok' : ''"
            @click="openSignBoard('1')"
          >
            {{ tbrSignImg ? "已签名" : "去签名"
            }}<span class="ms-row-icon size12"></span>
          </span>
        </div>
        <div class="sign_img">
          <img :src="tbrSignImg" v-if="tbrSignImg" />
        </div>
      </div>
      <!-- 多被保人 -->
      <div
        v-for="(item, index) in bbrDataList"
        :key="`sign${item.idNum}-${index}`"
      >
        <div class="sign_item mt10" v-if="bbrItemShow(item)">
          <div class="sign_desc">
            <span class="item_l">
              {{ bbrNameLabel(item, index) }}
              <i>{{ bbrNameValue(item) }}</i> 签名
            </span>
            <span
              class="item_v"
              :class="item.signImg ? 'isok' : ''"
              @click="openSignBoard('2', index)"
            >
              {{ item.signImg ? "已签名" : "去签名"
              }}<span class="ms-row-icon size12"></span>
            </span>
          </div>
          <p class="signtips" v-if="minorWarn(item)">
            当前被保人小于18周岁，由被保人父母/法定监护人签名
          </p>
          <div class="sign_img">
            <img :src="item.signImg" v-if="item.signImg" />
          </div>
        </div>
      </div>
      <div class="sign_item mt10" v-if="dlrSignShow">
        <div class="sign_desc">
          <span class="item_l">
            代理人 <i>{{ agentInfo.name }}</i> 签名
          </span>
          <span
            class="item_v"
            :class="dlrSignDone ? 'isok' : ''"
            @click="openSignBoard('3')"
          >
            {{ dlrSignDone ? "已签名" : "去签名"
            }}<span class="ms-row-icon size12"></span>
          </span>
        </div>
        <div class="sign_img">
          <img :src="dlrSignImg" v-if="dlrSignImg" />
        </div>
      </div>
    </div>
    <div class="refresh-mode" @click="getStatus">
      <MsImgIcon size="14" name="refresh" class="mr6" /> 刷新查看签名进度
    </div>
    <SignTipMask ref="signPreAct"></SignTipMask>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SignTipMask from "./SignTipMask";
import { multiBbrSignMinxin } from "@/mixins/sign.js";
export default {
  name: "QianZiListModule",
  props: ["signStatus"],
  model: {
    prop: "signStatus",
    event: "change",
  },
  data() {
    return {
      shareType: "",
      tbrSignImg: "",
      dlrSignImg: "",
      imgList: [],
      bbrDataList: [],
    };
  },
  components: { SignTipMask },
  computed: {
    ...mapGetters({
      apiBbrMult: "insert/apiBbrMult",
      applicant: "insert/applicant",
      agentInfo: "agent/agentInfo",
      dlrDontSign: "page/dlrDontSign",
      tbrPrvinCapital: "insert/tbrPrvinCapital",
      selfInsuredRegions: "dictionary/selfInsuredRegions",
    }),
  },
  mixins: [multiBbrSignMinxin],
  created() {},
  mounted() {
    if (this.$getDataFromUrl("utype")) {
      this.shareType = this.$getDataFromUrl("utype");
    }
  },
  methods: {
    getStatus() {
      this.tbrSignImg = "";
      this.dlrSignImg = "";
      this.bbrDataList = [];
      this.imgList = [];
      this.bbrDataList = JSON.parse(JSON.stringify(this.apiBbrMult));
      // this.$store.commit("updateLoad", true);
      this.$store.commit("updateLoadTxt", "签名文件资源下载中");
      let params = {
        ...this.apiComParams,
        type: "99",
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "queryImgList",
          toast: true,
        })
        .then((data) => {
          if (data.imgList.length > 0) {
            data.imgList.map((ele) => {
              if (ele.imgType == "1" && ele.imgUrl) {
                this.tbrSignImg = ele.imgUrl;
              } else if (ele.imgType == "3" && ele.imgUrl) {
                this.dlrSignImg = ele.imgUrl;
              } else if (ele.imgType == "2" && ele.imgUrl) {
                const len = this.bbrDataList.length;
                for (let s = 0; s < len; s++) {
                  const bitem = this.bbrDataList[s];
                  let tgrIdNum = bitem.idNum;
                  if (
                    this.$GlobalFuns.isMinorBaby(bitem) &&
                    bitem.guardianIdNo
                  ) {
                    tgrIdNum = bitem.guardianIdNo;
                  }
                  if (tgrIdNum == ele.idNum) {
                    this.$set(this.bbrDataList[s], "signImg", ele.imgUrl);
                  }
                }
              }
            });
            this.signDoneCheck();
          }
        });
    },
    openSignBoard(type, index) {
      // 添加签名完成状态
      let status = false,
        userItem = {};
      if (type == "1") {
        status = this.tbrSignImg ? true : false;
        userItem = this.applicant;
      } else if (type == "2") {
        status = this.bbrDataList[index].signImg ? true : false;
        userItem = this.bbrDataList[index];
      } else if (type == "3") {
        status = this.dlrSignDone;
        userItem = this.agentInfo;
      }
      this.$refs.signPreAct.initModule(type, userItem, status);
    },
  },
};
</script>

<style lang="less" scoped>
.sign_ul {
  padding: 0 12px;
  .sign_item {
    padding: 0 10px;
    border-radius: 10px;
    background: #ffffff;
    .sign_desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 400;
      color: #343434;
      padding: 10px 0;
      i {
        color: #ff8d1a;
      }
      .item_v {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #a6a6a6;
        &.isok {
          color: #43cf7c;
        }
      }
    }
    .sign_img {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 68px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ededed;
        transform: scaleY(0.5);
      }

      img {
        display: block;
        height: 68px;
        object-fit: fill;
      }
    }

    .signtips {
      font-size: 12px;
      color: #ff8d1a;
      padding-bottom: 5px;
    }
  }
}
.module_tt {
  width: 375px;
  height: 40px;
  color: #242424;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding-left: 20px;
  background: #f5f5f9;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: #da251d;
  }
}
</style>
